<template>
    <div>
      <!-- 面包屑导航条 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据中心</el-breadcrumb-item>
        <el-breadcrumb-item>原材料管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!--用于添加卡片（整体展示）-->
      <el-card class="box-card">
        <!--模糊查询表单-->
        <el-form :model="material" class="demo-form-inline" >
          <el-row :gutter="20">
            <el-form-item>
              <el-col :span="4">
                <!--模糊查询输入框 v-model是绑定的数据-->
                <el-input placeholder="材料名称" v-model="material.name"></el-input>
              </el-col>
                <!--搜索+添加的按钮 type可以修改按钮的颜色-->
              <el-button plain type="info">搜索</el-button>
              <el-button  type="primary" @click="toAdd">添加原材料</el-button>
            </el-form-item>
          </el-row>
        </el-form>
        <!--列表展示 :data是数据绑定 从后台获取的返回数据进行赋值-->
        <el-table
          :data="materialList"
          style="width: 100%">
          <!--一列的字段 label(需要修改)是上面的行名称 prop（需要修改）是绑定的后台数据-->
          <el-table-column
            prop="code"
            label="编号"
            width="100">
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="chemical"
            label="化学元素叫法"
            width="180">
          </el-table-column>
          <el-table-column
            prop="density"
            label="密度"
            width="180">
          </el-table-column>
          <el-table-column
            prop="hardness"
            label="硬度"
            width="180">
          </el-table-column>
          <el-table-column
            prop="remarks"
            label="材料介绍"
            width="180">
          </el-table-column>
          <el-table-column
            prop="price"
            label="单价"
            width="180">
          </el-table-column>
          <el-table-column
            label="操作"
            width="180">
            <!--点击按钮 需要绑定@click的时间 例如 @click="add"-->
            <el-button type="primary">编辑</el-button>
            <el-button type="primary">删除</el-button>
          </el-table-column>
          <!--分页的组件 需要将total,pagenum,pagesize重新定义并且赋值完成分页-->
          <!--用于分页的插件-->
          <el-pagination
            :current-page="pagenum"
            :page-size="pagesize"
            :page-sizes="[5, 10, 20, 40]"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </el-table>
      </el-card>
    </div>
</template>

<script>
  export default {
    name: 'MaterialMenu',
    data(){
      return{
        materialList:[],
        material:{},
        /*初始化分页数据*/
        pagenum:0,
        pagesize:5,
        total:0
      }
    },
    methods:{
      /*方法*/
      /*向后端发送请求*/
      /*请求数据进行赋值渲染*/
      /*分页进行改变时触发的函数*/
      handleSizeChange: function (val) {
        /*将数据重新赋值，并且向后端发送请求*/
        this.pagesize = val;
        this.searchUser();
      },
      handleCurrentChange: function (val) {
        /*将数据重新赋值，并且向后端发送请求*/
        this.pagenum = val;
        this.searchUser();
      },
    },
    mounted () {
      /*初始化赋值*/
      this.sel();
    }
  }
</script>

<style scoped>

</style>
